<!-- 每个item公共业务组件 -->
<template>
  <view class="item-wrap" :style="{ backgroundColor: bgColor, backgroundImage: bgImg }">
    <view class="item-top d-flex align-items-center justify-content-between">
      <text class="item-title">{{ title }}</text>
      <image src="/static/images/home/iconArrowRight.png" alt="" class="block icon-right" />
    </view>
    <view class="item-bottom">
      <text>{{ subTitle }}</text>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: '显示标题',
  },
  subTitle: String,
  bgColor: String,
  bgImg: String,
})
</script>

<style>
.item-wrap {
  padding: 11px 12px;
  /* background-color: #fff8eb; */
  /* background-image: url(static/images/home/bg1.png); */
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  .item-top {
    .item-title {
      font-size: 14px;
      font-weight: 500;
      line-height: 22px;
      color: #1d2129;
    }
    .icon-right {
      width: 16px;
      height: 16px;
    }
  }
  .item-bottom {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #86909c;
  }
}
</style>
